import * as React from 'react';
import Box from '@/commonComponents/box/index';
import { useAppSelector, useAppDispatch } from '@/app/hooks';
// import type { PassengerProps } from '@/pages/order/indexSlice';
// import type { PassengerUpdateProps } from '@/pages/order/types';
import { removePassenger, updatePassenger } from '@/pages/order/indexSlice';
import './index.module.scss';
const { memo, useState } = React;

interface Passenger1Props {
  data?: number[];
  isLoading?: boolean;
  id: number;
  name: string | undefined;
  followAdult: number | undefined;
  followAdultName: string | undefined;
  ticketType: string | undefined;
  licenceNo: string | undefined;
  gender: string | undefined;
  birthday: string | undefined;
  // showGenderMenu: (id: number) => void;
  // showFollowAdultMenu: (id: number) => void;
  // showTicketTypeMenu: (id: number) => void;
}

function Passenger(props: Passenger1Props) {
  const {
    id,
    name,
    followAdultName,
    ticketType,
    licenceNo,
    gender,
    birthday,
    // showFollowAdultMenu,
    // showTicketTypeMenu,
  } = props;
  const dispatch = useAppDispatch();
  const [isAdult, setIsAdult] = useState(ticketType === 'adult');
  return (
    <Box data={[1]} isLoading={false} styleName="passenger-box">
      <li styleName="passenger">
        <i styleName="delete" onClick={() => dispatch(removePassenger(id))}>
          —
        </i>
        <ol styleName="items">
          <li styleName="item">
            <label styleName="label name">姓名</label>
            <input
              type="text"
              styleName="input name"
              placeholder="乘客姓名"
              value={name}
              onChange={(e) => {
                dispatch(
                  updatePassenger({ id, data: { name: e.target.value } })
                );
              }}
            />
            <label styleName="ticket-type">
              {/* onClick={() => setIsAdult(!isAdult)} */}
              {/* {isAdult ? '成人票' : '儿童票'} */}
              成人票
            </label>
          </li>
          {isAdult && (
            <li styleName="item">
              <label styleName="label licenceNo">身份证</label>
              <input
                type="number"
                styleName="input licenceNo"
                placeholder="证件号码"
                value={licenceNo}
                onChange={(e) =>
                  dispatch(
                    updatePassenger({ id, data: { licenceNo: e.target.value } })
                  )
                }
              />
            </li>
          )}
          {!isAdult && (
            <li styleName="item arrow">
              <label styleName="label gender">性别</label>
              <input
                type="text"
                styleName="input gender"
                placeholder="请选择"
                // onClick={() => showGenderMenu(id)}
                value={
                  gender === 'male' ? '男' : gender === 'female' ? '女' : ''
                }
              // readOnly
              />
            </li>
          )}
          {!isAdult && (
            <li styleName="item">
              <label styleName="label birthday">出生日期</label>
              <input
                type="text"
                styleName="input birthday"
                placeholder="如 19951015"
                value={birthday}
                onChange={(e) =>
                  dispatch(
                    updatePassenger({ id, data: { birthday: e.target.value } })
                  )
                }
              />
            </li>
          )}
          {!isAdult && (
            <li styleName="item arrow">
              <label styleName="label followAdult">同行成人</label>
              <input
                type="text"
                styleName="input followAdult"
                placeholder="请填写"
                value={followAdultName}
                // onClick={() => showFollowAdultMenu(id)}
                readOnly
              />
            </li>
          )}
        </ol>
      </li>
    </Box>
  );
}

export default memo(Passenger);
